<template>
  <div>
    <navbar></navbar>
    <div class="wrapper">

      <el-container>
        <el-aside width="200px">
          <el-menu>
            <el-menu-item index="1-1" v-on:click="content_index=1">
              <span class="menu-title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="1-2" v-on:click="content_index=2">
              <span class="menu-title">电子钱包</span>
            </el-menu-item>
            <el-menu-item index="1-3" v-on:click="content_index=3">
              <span class="menu-title">收货地址</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <!--        个人中心内容-->
            <div class="content-inner" v-show="content_index===1">
              <el-button class="adjust-button" @click="modify">修改信息</el-button>
              <div class="user-container">
                <div class="user-avatar-container">
                  <img class="user-avatar" id="user-avatar" :src="user_info.user_portrait" alt="">
                  <el-button style="width: 150px" onclick="document.getElementById('choose-image').click();">更换头像
                  </el-button>
                  <input id="choose-image" v-show="false" type="file" accept="image/jpg, image/png, image/jpeg, image/gif"
                         @change="modifyAvatar()">
                </div>
                <div class="user-data-container">
                  <div class="input-container">
                    用户名：
                    <el-input v-model="user_info.user_name" class="input"></el-input>
                  </div>
                  <div class="input-container">
                    电话：
                    <el-input v-model="user_info.tel" class="input"></el-input>
                  </div>
                  <div class="input-container">
                    邮箱：
                    <el-input v-model="user_info.email" class="input"></el-input>
                  </div>
                </div>
              </div>
            </div>
            <!--        电子钱包-->
            <div class="content-inner" v-show="content_index===2">
              <div class="wallet-title">电子钱包</div>
              <div class="money-container">
                <div class="money">
                  当前余额：{{ user_info.wallet }}
                </div>
                <el-button class="charge-button" @click="openCharge">余额充值</el-button>
              </div>
            </div>
            <!--        收货地址-->
            <div class="content-inner" v-show="content_index===3">
              <el-table :data="address">
                <el-table-column
                  prop="name"
                  label="收件人姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="tel"
                  label="联系电话"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="country"
                  label="国家/地区"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="详细地址"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="zip_code"
                  label="邮编"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="is_default"
                  label="默认地址"
                  width="100">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="openModifyAddress(scope.row)">修改地址</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin: 20px 0;padding-left: 660px">
                <el-button type="primary" @click="newAddressForm=true">新增地址</el-button>
              </div>
              <el-dialog title="修改收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="address_modify" style="text-align: left">
                  <el-form-item label="收件人：" :label-width="formLabelWidth">
                    <el-input v-model="address_modify.name" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="电话：" :label-width="formLabelWidth">
                    <el-input v-model="address_modify.tel" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="国家/地区：" :label-width="formLabelWidth">
                    <el-select v-model="address_modify.country" placeholder="请选择活动区域">
                      <el-option label="赛博坦" value="shanghai"></el-option>
                      <el-option label="M78" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="邮编：" :label-width="formLabelWidth">
                    <el-input v-model="address_modify.zip_code" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="详细地址：" :label-width="formLabelWidth">
                    <el-input v-model="address_modify.address" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="默认地址：" :label-width="formLabelWidth">
                    <el-checkbox v-model="address_modify.is_default"></el-checkbox>
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="modifyAddress">确 定</el-button>
                </div>
              </el-dialog>
              <el-dialog title="新建收货地址" :visible.sync="newAddressForm">
                <el-form :model="address_new">
                  <el-form-item label="收件人：" :label-width="formLabelWidth">
                    <el-input v-model="address_new.name" class="input" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话：" :label-width="formLabelWidth">
                    <el-input v-model="address_new.tel" class="input" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="国家/地区：" :label-width="formLabelWidth">
                    <el-select v-model="address_new.country" placeholder="请选择活动区域">
                      <el-option label="赛博坦" value="shanghai"></el-option>
                      <el-option label="M78" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="邮编：" :label-width="formLabelWidth">
                    <el-input v-model="address_new.zip_code" class="input" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="详细地址：" :label-width="formLabelWidth">
                    <el-input v-model="address_new.address" class="input" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="默认地址：" :label-width="formLabelWidth">
                    <el-checkbox v-model="address_new.is_default"></el-checkbox>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="newAddressForm = false">取 消</el-button>
                  <el-button type="primary" @click="addAddress">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-main>
        </el-container>
      </el-container>
  </div>
</div>
</template>

<style scoped>
.wrapper {

}
.adjust-button {
  float: right;
  padding: 10px;
  /*border-radius: 5px;*/
  /*border-left: 1px #333333 dashed;*/
  /*border-bottom: 1px #333333 dashed;*/

  cursor: pointer;
}

.user-container {
  clear: both;
  width: 100%;
  display: flex;
}

.user-avatar-container {
  flex: 1;
  text-align: center;
}

.user-avatar {
  width: 150px;
  height: 200px;
  display: block;
  margin: 0 auto;
}

.user-data-container {
  flex: 2;
}

.input-container {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.input {
  width: 200px;
  margin-right: 50%;
}

.wallet-title {
  font-size: 30px;
  font-weight: bolder;
  padding-left: 100px;
  margin-top: 50px;
}

.money-container {
  padding-left: 100px;
  padding-right: 100px;
  margin-top: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.money {
  font-size: 20px;
}

.input {
  width: 200px;
}
</style>

<script>
import axios from "axios";
import CONFIG from "../config/config";
import Qs from "qs";
import navbar from "../components/navbar";

export default {
  name: "user_center",
  components: {navbar},
  data() {
    return {
      content_index: 1,
      user_info: this.$store.state.user.user_info,
      address: this.$store.state.user.address,

      address_modify: {},
      address_new: {
        name: '',
        tel: '',
        country: '',
        address: '',
        zip_code: '',
        is_default: true
      },

      onModify: false,
      dialogFormVisible: false,
      newAddressForm: false,

      formLabelWidth: '120px',
    }
  },
  methods: {
    //打开充值界面，调用下面的recharge函数
    openCharge() {
      this.$prompt('请输入金额', '余额充值', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[1-9]\d*/,
        inputErrorMessage: '请输入数字'
      }).then(({value}) => {
        this.recharge(value);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //此函数由于历史遗留问题，并没有放进vuex中执行
    recharge(value) {
      axios.post('/user_center/recharge', Qs.stringify({money: value}), {
        headers: {
          'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        }
      }).then(res => {
        console.log(res);
        this.$store.dispatch('user/queryCash').then(() => {
          this.$message.success('充值成功！')
        })
      }).catch(e => {
        console.log(e);
      })
      console.log('充值请求发送');
    },
    //修改用户信息
    modify() {
      this.$store.dispatch('user/userDataModify').then(() => {
        this.$store.dispatch('user/userDataQuery').then(() => {
          this.$message.success('修改成功！');
        })
      }).catch(e => {
        this.$message.error('修改失败！');
      })
    },
    //修改头像
    modifyAvatar() {
      console.log('选择完毕');
      let file = document.getElementById('choose-image').files[0]
      console.log(file);
      let that=this;

      let reader = new FileReader();        //通过文件流将文件转换成Base64字符串
      if (file) {
        reader.readAsDataURL(file);
        reader.onloadend = ()=> {
          that.$message.success('选择图片成功！')
          that.$store.commit('user/loadNewAvatar',reader.result);
        }
      }
    },
    //打开修改地址表单
    openModifyAddress(a) {
      this.dialogFormVisible = true;
      this.address_modify = {...a};
    },
    //提交地址修改
    modifyAddress() {
      this.$store.dispatch('user/modifyAddress', this.address_modify).then(() => {
        this.$store.dispatch('user/queryAddress').then(() => {
          this.$message.success('修改成功！');
          this.dialogFormVisible = false
        })
      }).catch(e => {
        this.$message.error('修改失败！');
      })
    },
    //新增地址
    addAddress() {
      this.$store.dispatch('user/addAddress', this.address_new).then(() => {
        this.$store.dispatch('user/queryAddress').then(() => {
          this.$message.success('新增成功！');
          this.newAddressForm = false;
        })
      }).catch(e => {
        this.$message.error('新增失败！');
      })
    },
  },
  beforeCreate() {
    Promise.all([this.$store.dispatch('user/userDataQuery'), this.$store.dispatch('user/queryCash'), this.$store.dispatch('user/queryAddress')])
      .then(() => {
        this.$message.success('个人信息获取成功！');
        // console.log(this.user_info);
      })
  },
}
</script>


